<template>
  <div class="test-table">
    <h1>Table 表格</h1>
    <p>主要用于展示大量结构化数据。</p>
    <h2>基础用法</h2>
    <Table :columns="columns" :data="datas" height="400" :span-method="handleSpan">
      <template slot-scope="{ row, index }" slot="address">
        <Select transfer v-model="row.address">
          <Option value="西安" label="西安" />
          <Option value="武汉" label="武汉" />
          <Option value="北京" label="北京" />
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="time">
        <DatePicker transfer v-model="row.time" placeholder="选择日期" />
      </template>
      <template slot-scope="{ row, index }" slot="type">
        <Cascader transfer v-model="row.type" :data="typeArr" placeholader="请选择类型"></Cascader>
      </template>
    </Table>
    <p>表格的最简单用法。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table :columns=&quot;columns1&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            columns1: [
              {
                  title: '姓名',
                  key: 'name'
              },
              {
                  title: '年龄',
                  key: 'age'
              },
              {
                  title: '地址',
                  key: 'address'
              }
            ],
            data1: [
              {
                  name: '王小明',
                  age: 18,
                  address: '北京市朝阳区芍药居'
              },
              {
                  name: '张小刚',
                  age: 25,
                  address: '北京市海淀区西二旗'
              },
              {
                  name: '李小红',
                  age: 30,
                  address: '上海市浦东新区世纪大道'
              },
              {
                  name: '周小伟',
                  age: 26,
                  address: '深圳市南山区深南大道'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>斑马纹</h2>
    <Table stripe :columns="columns1" :data="data1" height=200 />
    <p>设置属性 <code>stripe</code> ，表格会间隔显示不同颜色，用于区分不同行数据。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table stripe :columns=&quot;columns1&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            columns1: [
              {
                  title: '姓名',
                  key: 'name'
              },
              {
                  title: '年龄',
                  key: 'age'
              },
              {
                  title: '地址',
                  key: 'address'
              }
            ],
            data1: [
              {
                  name: '王小明',
                  age: 18,
                  address: '北京市朝阳区芍药居'
              },
              {
                  name: '张小刚',
                  age: 25,
                  address: '北京市海淀区西二旗'
              },
              {
                  name: '李小红',
                  age: 30,
                  address: '上海市浦东新区世纪大道'
              },
              {
                  name: '周小伟',
                  age: 26,
                  address: '深圳市南山区深南大道'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>自定义样式：</h2>
    <p>自定义行样式：</p>
    <Table :row-class-name="rowClassName" :columns="columns1" :data="data1" height=300 />
    <p>自定义列样式：</p>
    <Table :columns="columns9" :data="data1"/>
    <p>自定义任意单元格样式：</p>
    <Table :columns="columns1" :data="data8"/>
    <p>行：通过属性 <code>row-class-name</code> 可以给某一行指定一个样式名称。</p>
    <p>列：通过给列 <code>columns</code> 设置字段 <code>className</code> 可以给某一列指定一个样式。</p>
    <p>单元格：通过给数据 <code>data</code> 设置字段 <code>cellClassName</code> 可以给任意一个单元格指定样式。</p>
    <p>代码示例：</p>
    <pre>
      &lt;style&gt;
        .sh-table .demo-table-info-row td{
          background-color: #2db7f5;
          color: #fff;
        }
        .sh-table .demo-table-error-row td{
          background-color: #ff6600;
          color: #fff;
        }
        .sh-table td .demo-table-info-column {
          background-color: #2db7f5;
          color: #fff;
        }
        .sh-table .demo-table-info-cell-name {
          background-color: #2db7f5;
          color: #fff;
        }
        .sh-table .demo-table-info-cell-age {
          background-color: #ff6600;
          color: #fff;
        }
        .sh-table .demo-table-info-cell-address {
          background-color: #187;
          color: #fff;
        }
      &lt;/style&gt;
      &lt;template&gt;
        &lt;p&gt;自定义行样式：&lt;/p&gt;
        &lt;Table :row-class-name=&quot;rowClassName&quot; :columns=&quot;columns1&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
        &lt;p&gt;自定义列样式：&lt;/p&gt;
        &lt;Table :columns=&quot;columns9&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
        &lt;p&gt;自定义任意单元格样式：&lt;/p&gt;
        &lt;Table :columns=&quot;columns1&quot; :data=&quot;data8&quot;&gt;&lt;/Table&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            columns1: [
              {
                title: '姓名',
                key: 'name'
              },
              {
                title: '年龄',
                key: 'age'
              },
              {
                title: '地址',
                key: 'address'
              }
            ],
            columns9: [
              {
                title: '姓名',
                key: 'name'
              },
              {
                title: '年龄',
                key: 'age',
                className: 'demo-table-info-column'
              },
              {
                title: '地址',
                key: 'address',
                tooltip: true
              }
            ],
            data1: [
              {
                name: '王小明',
                age: 18,
                address: '北京市朝阳区芍药居'
              },
              {
                name: '张小刚',
                age: 25,
                address: '北京市海淀区西二旗'
              },
              {
                name: '李小红',
                age: 30,
                address: '上海市浦东新区世纪大道'
              },
              {
                name: '周小伟',
                age: 26,
                address: '深圳市南山区深南大道'
              }
            ],
            data8: [
              {
                name: '王小明',
                age: 18,
                address: '北京市朝阳区芍药居'
              },
              {
                name: '张小刚',
                age: 25,
                address: '北京市海淀区西二旗',
                cellClassName: {
                  age: 'demo-table-info-cell-age',
                  address: 'demo-table-info-cell-address'
                }
              },
              {
                name: '李小红',
                age: 30,
                address: '上海市浦东新区世纪大道'
              },
              {
                name: '周小伟',
                age: 26,
                address: '深圳市南山区深南大道',
                cellClassName: {
                  name: 'demo-table-info-cell-name'
                }
              }
            ]
          }
        },
        methods: {
          rowClassName (row, index) {
            if (index === 1) {
              return 'demo-table-info-row';
            } else if (index === 3) {
              return 'demo-table-error-row';
            }
            return '';
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>固定列</h2>
    <Table width="800" height="300" :columns="columns2" :data="data3"/>
    <p>通过给数据 <code>columns</code> 的项设置 <code>fixed</code> 为 <code>left</code> 或 <code>right</code> ，可以左右固定需要的列。当横向内容过多时可以使用。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table width=&quot;600&quot; :columns=&quot;columns2&quot; :data=&quot;data3&quot;&gt;&lt;/Table&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            columns2: [
              {
                title: '姓名',
                key: 'name',
                width: 100,
                fixed: 'left'
              },
              {
                title: '年龄',
                key: 'age',
                width: 100
              },
              {
                title: '省份',
                key: 'province',
                width: 100
              },
              {
                title: '市区',
                key: 'city',
                width: 100
              },
              {
                title: '地址',
                key: 'address',
                width: 200
              },
              {
                title: '邮编',
                key: 'zip',
                width: 100
              },
              {
                title: '操作',
                key: 'action',
                fixed: 'right',
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'text'
                      }
                    },'查看'),
                    h('Button', {
                      props: {
                        type: 'text'
                      }
                    },'编辑')
                  ])
                }
              }
            ],
            data3: [
              {
                name: '王小明',
                age: 18,
                address: '北京市朝阳区芍药居',
                province: '北京市',
                city: '朝阳区',
                zip: 100000
              },
              {
                name: '张小刚',
                age: 25,
                address: '北京市海淀区西二旗',
                province: '北京市',
                city: '海淀区',
                zip: 100000
              },
              {
                name: '李小红',
                age: 30,
                address: '上海市浦东新区世纪大道',
                province: '上海市',
                city: '浦东新区',
                zip: 100000
              },
              {
                name: '周小伟',
                age: 26,
                address: '深圳市南山区深南大道',
                province: '广东',
                city: '南山区',
                zip: 100000
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>可展开</h2>
    <Table :columns="columns3" :data="data1" @on-row-click="rowClick">
      <template slot-scope="{ row, index }" slot="address">
        <span>{{ row.address }}</span>
      </template>
    </Table>
    <br><br>
    <p>当表格内容较多不能一次性完全展示时使用。</p>
    <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'expand'</code> ，即可开启扩展功能。</p>
    <p>渲染展开区域与自定义列模板方法类似，使用 <code>render</code> 函数。</p>
    <p>当选择时，触发事件 <code>@on-row-click</code> ，可以自定义操作，事件返回两个值 <code>RowObj</code> 和 <code>index</code> ，分别为当前行的数据和当前行的下标。</p>
    <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'index'</code> ，可以自动显示一个从 <code>1</code> 开始的索引列。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table :columns=&quot;columns3&quot; :data=&quot;data1&quot; @on-row-click=&quot;rowClick&quot;&gt;&lt;/Table&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            columns3: [
              {
                type: 'expand',
                width: 66,
                render: (h, params) => {
                  let row = []
                  if (params.row && params.row.children) {
                    row = params.row.children
                  }
                  return h('Expand', {
                    props: {
                      row: row,
                      col: this.columns3,
                      index: params.index
                    }
                  })
                }
              },
              {
                type: 'index',
                width: 66,
              },
              {
                title: '姓名',
                key: 'name'
              },
              {
                title: '年龄',
                key: 'age'
              },
              {
                title: '地址',
                key: 'address'
              },
              {
                title: '操作',
                key: 'action',
                render: (h, params) => {
                  // console.log(params)
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'text'
                      }
                    },'查看'),
                    h('Button', {
                      props: {
                        type: 'text'
                      }
                    },'编辑')
                  ])
                }
              }
            ],
            data1: [
              {
                name: '王小明',
                age: 18,
                address: '北京市朝阳区芍药居'
              },
              {
                name: '张小刚',
                age: 25,
                address: '北京市海淀区西二旗'
              },
              {
                name: '李小红',
                age: 30,
                address: '上海市浦东新区世纪大道'
              },
              {
                name: '周小伟',
                age: 26,
                address: '深圳市南山区深南大道'
              }
            ]
          }
        },
        methods: {
          rowClick (params) {
            console.log('rowClick', params)
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>多选</h2>
    <Table :columns="columns4"
      :data="data1"
      @on-select="onSelect"
      @on-selection-change="onSelectChange"/>
      <p>通过给 <code>columns</code> 数据设置一项，指定 <code>type: 'selection'</code> ，即可自动开启多选功能。</p>
      <h2>正确使用好以下事件，可以达到需要的效果：</h2>
      <p> <code>@on-select</code> ，选中某一项触发，返回值为 <code>selection</code> 和 <code>row</code> ，分别为已选项和刚选择的项。</p>
      <p> <code>@on-selection-change</code> ，只要选中项发生变化时就会触发，返回值为 <code>selection</code> ，已选项。</p>
      <p>代码示例：</p>
      <pre>
        &lt;template&gt;
          &lt;Table :columns=&quot;columns4&quot;
            :data=&quot;data1&quot;
            @on-select=&quot;selectChange&quot;
            @on-selection-change=&quot;selectData&quot;&gt;&lt;/Table&gt;
          &lt;/template&gt;
        &lt;script&gt;
        export default {
          data () {
            return {
              columns4: [
                {
                  type: 'selection',
                  width: 80,
                  align: 'center'
                },
                {
                  title: '姓名',
                  key: 'name'
                },
                {
                  title: '年龄',
                  key: 'age'
                },
                {
                  title: '地址',
                  key: 'address',
                  tooltip: true
                }
              ],
              data1: [
                {
                  name: '王小明',
                  age: 18,
                  address: '北京市朝阳区芍药居'
                },
                {
                  name: '张小刚',
                  age: 25,
                  address: '北京市海淀区西二旗'
                },
                {
                  name: '李小红',
                  age: 30,
                  address: '上海市浦东新区世纪大道'
                },
                {
                  name: '周小伟',
                  age: 26,
                  address: '深圳市南山区深南大道'
                }
              ]
            }
          },
          methods: {
            selectChange(obj) {
              // 选中数据变化
              console.log('selectChange', obj)
            },
            selectData(obj) {
              // 选中数据
              console.log('selectData', obj)
            },
            selectAll(arr) {
              // 全选
              console.log('selectAll', arr)
            },
            selectAllCancel(arr) {
              // 取消全选
              console.log('selectAllCancel', arr)
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>加载中</h2>
    <Table :loading="loading" :columns="columns1" :data="data1"/>
    <br>
    切换 Loading 状态<sh-switch style="margin-left:10px;" v-model="loading"/>
    <p>通过设置属性 <code>loading</code> 可以让表格处于加载中状态，在异步请求数据、分页时建议使用。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table :loading=&quot;loading&quot; :columns=&quot;columns1&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
        &lt;br&gt;
        切换 Loading 状态&lt;sh-switch v-model=&quot;loading&quot;&gt;&lt;/sh-switch&gt;
      &lt;template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              loading: true,
              columns1: [
                {
                  title: '姓名',
                  key: 'name'
                },
                {
                  title: '年龄',
                  key: 'age'
                },
                {
                  title: '地址',
                  key: 'address'
                }
              ],
              data1: [
                {
                  name: '王小明',
                  age: 18,
                  address: '北京市朝阳区芍药居'
                },
                {
                  name: '张小刚',
                  age: 25,
                  address: '北京市海淀区西二旗'
                },
                {
                  name: '李小红',
                  age: 30,
                  address: '上海市浦东新区世纪'
                },
                {
                  name: '周小伟',
                  age: 26,
                  address: '深圳市南山区深南'
                }
              ]
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>导出csv</h2>
    <Table ref="tableDef" :columns="columns1" :data="data1"/>
    <Button style="margin-top:15px;" type="primary" @click="exportCsv">导出csv</Button>
    <p>通过调用 <code>exportCsv()</code>  方法，可以将数据导出为 <code>.csv</code> 的表格文件。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Table ref=&quot;tableDef&quot; :columns=&quot;columns1&quot; :data=&quot;data1&quot;&gt;&lt;/Table&gt;
        &lt;Button style=&quot;margin-top:15px;&quot; type=&quot;primary&quot; @click=&quot;exportCsv&quot;&gt;导出csv&lt;/Button&gt;
      &lt;template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              loading: true,
              columns1: [
                {
                  title: '姓名',
                  key: 'name'
                },
                {
                  title: '年龄',
                  key: 'age'
                },
                {
                  title: '地址',
                  key: 'address'
                }
              ],
              data1: [
                {
                  name: '王小明',
                  age: 18,
                  address: '北京市朝阳区芍药居'
                },
                {
                  name: '张小刚',
                  age: 25,
                  address: '北京市海淀区西二旗'
                },
                {
                  name: '李小红',
                  age: 30,
                  address: '上海市浦东新区世纪'
                },
                {
                  name: '周小伟',
                  age: 26,
                  address: '深圳市南山区深南'
                }
              ]
            }
          },
          methods: {
            exportCsv () {
              this.$refs.tableDef.exportCsv()
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Table props</p>
    <Table :columns="tableColumn" :data="tableData"/>
    <br>
    <p>column props</p>
    <Table :columns="tableColumnP" :data="tableDataP"/>
    <br>
    <p>Table events</p>
    <Table :columns="tableColumnE" :data="tableDataE"/>
  </div>
</template>

<script>
import ExpandInner from './ExpandInner'
export default {
  name: 'TestTable',
  data () {
    return {
      loading: true,
      hasPage: false,
      isLoading: false,
      noText: '表格无数据',
      typeArr: [
        {
          value: '1',
          label: '蔬菜',
          children: [
            {
              value: '1.1',
              label: '香菜'
            },
            {
              value: '1.2',
              label: '芹菜'
            },
            {
              value: '1.3',
              label: '大葱'
            }
          ]
        },
        {
          value: '2',
          label: '水果',
          children: [
            {
              value: '2.1',
              label: '香蕉'
            },
            {
              value: '2.2',
              label: '苹果'
            },
            {
              value: '2.3',
              label: '荔枝'
            }
          ]
        },
        {
          value: '3',
          label: '动物',
          children: [
            {
              value: '3.1',
              label: '猴子'
            },
            {
              value: '3.2',
              label: '狮子'
            },
            {
              value: '3.3',
              label: '大象'
            }

          ]
        }
      ],
      columns: [
        {
          type: 'index',
          width: 66,
          align: 'center'
        },
        {
          type: 'selection',
          width: 66,
          align: 'center'
        },
        {
          title: '地址',
          key: 'address',
          slot: 'address'
        },
        {
          title: '时间',
          key: 'time',
          slot: 'time'
        },
        {
          title: '类别',
          key: 'type',
          slot: 'type',
          align: 'center'
        }
      ],
      datas: [
        {
          address: '西安',
          time: '2019-9-10'
        },
        {
          address: '北京',
          time: '2019-9-11'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        },
        {
          address: '武汉',
          time: '2019-9-12'
        }
      ],
      columns1: [
        {
          type: 'index',
          width: 68,
          align: 'center',
          title: '序号'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address',
          tooltip: true
        }
      ],
      columns2: [
        {
          type: 'selection',
          fixed: 'left',
          align: 'center',
          width: 68
        },
        {
          title: '姓名',
          fixed: 'left',
          key: 'name',
          width: 150
        },
        {
          title: '年龄',
          key: 'age',
          width: 150
        },
        {
          title: '省份',
          key: 'province',
          width: 150
        },
        {
          title: '市区',
          key: 'city',
          width: 150
        },
        {
          title: '地址',
          key: 'address',
          width: 200,
          ellipsis: true
        },
        {
          title: '邮编',
          key: 'zip',
          width: 150
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text'
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'text'
                }
              }, '编辑')
            ])
          }
        }
      ],
      columns3: [
        {
          type: 'expand',
          width: 66,
          className: 'expand-icon-wrap',
          render: (h, params) => {
            let row = []
            if (params.row && params.row.children) {
              row = params.row.children
            }
            return h(ExpandInner, {
              props: {
                row: row,
                col: params.columns,
                columnsWidth: params.columnsWidth,
                index: params.index
              }
            })
          }
        },
        {
          title: '年龄',
          key: 'age',
          className: 'expand-cell'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '地址',
          key: 'address',
          tooltip: true
          // slot: 'address'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text'
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'text'
                }
              }, '编辑')
            ])
          }
        }
      ],
      columns4: [
        {
          type: 'selection',
          width: 66,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address',
          tooltip: true
        }
      ],
      columns9: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age',
          className: 'demo-table-info-column'
        },
        {
          title: '地址',
          key: 'address',
          tooltip: true
        }
      ],
      data1: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居北京市朝阳区芍药居北京市朝阳区芍药居',
          // _expanded: true,
          children: [
            {
              name: '王小明',
              age: 17,
              address: '北京市朝阳区芍药居北京市朝阳区芍药居北京市朝阳区芍药居'
              // children: [
              //   {
              //     name: '王小明1.1',
              //     age: 7,
              //     address: '北京市朝阳区芍药居'
              //   },
              //   {
              //     name: '王小明1.2',
              //     age: 6,
              //     address: '北京市朝阳区芍药居'
              //   }
              // ]
            },
            {
              name: '王小明',
              age: 16,
              address: '北京市朝阳区芍药居'
            },
            {
              name: '王小明',
              age: 15,
              address: '北京市朝阳区芍药居'
            }
          ]
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗',
          children: [
            {
              name: '张小刚1',
              age: 24,
              address: '北京市海淀区西二旗'
            },
            {
              name: '张小刚2',
              age: 23,
              address: '北京市海淀区西二旗'
            },
            {
              name: '张小刚3',
              age: 22,
              address: '北京市海淀区西二旗'
            }
          ]
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南'
        }
      ],
      data2: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        },
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        }
      ],
      data3: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居',
          province: '北京市',
          city: '朝阳区',
          zip: 100000
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗',
          province: '北京市',
          city: '海淀区',
          zip: 100000
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道',
          province: '上海市',
          city: '浦东新区',
          zip: 100000
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          province: '广东',
          city: '南山区',
          zip: 100000
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          province: '广东',
          city: '南山区',
          zip: 100000
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          province: '广东',
          city: '南山区',
          zip: 100000
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          province: '广东',
          city: '南山区',
          zip: 100000
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          province: '广东',
          city: '南山区',
          zip: 100000
        }
      ],
      data8: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗',
          cellClassName: {
            age: 'demo-table-info-cell-age',
            address: 'demo-table-info-cell-address'
          }
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道',
          cellClassName: {
            name: 'demo-table-info-cell-name'
          }
        }
      ],
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 400,
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'data',
          explain: '显示的结构化数据',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'columns',
          explain: '表格列的配置描述',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'stripe',
          explain: '是否显示间隔斑马纹',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'width',
          explain: '表格宽度，单位 px',
          type: 'Number | String',
          default: '自动'
        },
        {
          attribute: 'showPage',
          explain: '显示分页',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'loading',
          explain: 'loading状态显示',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'tooltip',
          explain: '表格内容超出时显示的气泡提示',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'row-class-name',
          explain: '行的 className 的回调方法，传入参数：row：当前行数据.index：当前行的索引',
          type: 'Function',
          default: '-'
        }
      ],
      tableColumnP: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 400,
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableDataP: [
        {
          attribute: 'title',
          explain: '列头显示文字',
          type: 'String',
          default: '#'
        },
        {
          attribute: 'key',
          explain: '对应列内容的字段名',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'width',
          explain: '列宽',
          type: 'Number',
          default: '-'
        },
        {
          attribute: 'align',
          explain: '对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐',
          type: 'String',
          default: 'left'
        },
        {
          attribute: 'className',
          explain: '列的样式名称',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'fixed',
          explain: '列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'render',
          explain: '自定义渲染列，传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行',
          type: 'Function',
          default: '-'
        }
      ],
      tableColumnE: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type',
          tooltip: true
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableDataE: [
        {
          event: 'on-row-click',
          type: '单击某一行时触发',
          callback: '当前行的数据'
        },
        {
          event: 'on-row-dblclick',
          type: '双击某一行时触发',
          callback: '当前行的数据'
        },
        {
          event: 'on-select',
          type: '在多选模式下有效，选中某一项时触发',
          callback: '已选项数据'
        },
        {
          event: 'on-selection-change',
          type: '在多选模式下有效，只要选中项发生变化时就会触发',
          callback: '已选项数据'
        }
      ]
    }
  },
  methods: {
    handleSpan ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return [1, 2]
      } else if (rowIndex === 0 && columnIndex === 1) {
        return [0, 0]
      }
      if (rowIndex === 2 && columnIndex === 0) {
        return {
          rowspan: 2,
          colspan: 1
        }
      } else if (rowIndex === 3 && columnIndex === 0) {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    exportCsv () {
      this.$refs.tableDef.exportCsv()
    },
    rowClassName (row, index) {
      if (index === 1) {
        return 'demo-table-info-row'
      } else if (index === 3) {
        return 'demo-table-error-row'
      }
      return ''
    },
    rowClick (params) {
      // console.log('rowClick', params)
    },
    rowDblclick (params) {
      // console.log('rowDblclick', params)
    },
    rowClass (row, index) {
      if (index === 1) {
        return 'diy-row'
      }
      return ''
    },
    onSelect (obj) {
      // 选中数据变化
      console.log('on-select事件:', obj)
    },
    onSelectChange (obj) {
      // 选中数据
      console.log('on-selection-change事件:', obj)
    }
  }
}
</script>

<style lang="less">
.sh-table {
  .demo-table-info-row td{
    // background-color: #2db7f5;
    color: red;
  }
  .demo-table-error-row td{
    background-color: #ff6600;
    color: #fff;
  }
  .demo-table-info-column {
    background-color: #2db7f5;
    color: #fff;
  }
  .demo-table-info-cell-name {
    background-color: #2db7f5;
    color: #fff;
  }
  .demo-table-info-cell-age {
    background-color: #ff6600;
    color: #fff;
  }
  .demo-table-info-cell-address {
    background-color: #187;
    color: #fff;
  }
  .expand-icon-wrap {
    border-right: 0;
  }
  .expand-cell {
    .sh-table-cell {
      padding-left: 10px;
    }
  }
}
</style>

<style scoped lang="less">
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
p {
  padding: 5px 0;
}
</style>
